import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { routerRedux, Link } from 'dva/router';
import {
    Row, Col, Card, Form, Input, Select, message,
    Button, Table, Divider, Modal
} from 'antd';
// import StandardTable from '../../components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './RoleManagement.less';

/*
角色管理
*/
const FormItem = Form.Item;
const { TextArea } = Input;
const levelTypeArray = ["平台", "机构", "分公司", "二级分公司", "业务员"];
@connect(({ role }) => ({
    role,
}))
@Form.create()
export default class RoleManagement extends PureComponent {
    state = {
        modalVisible: false,
        isEdit: true,
        level: 0,
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'role/fetchRole',
            payload: {
                offset: 0,
                limit: 10,
            },
        });
    }

    hanleCreateRoleModalOk = () => {
        const { dispatch } = this.props;
        const { validateFieldsAndScroll } = this.props.form;
        validateFieldsAndScroll((error, values) => {
            if (!error) {
                if (this.state.isEdit) {
                    dispatch({
                        type: 'role/createRole',
                        payload: {
                            roleName: values.roleName,
                            level: values.level,
                            remark: values.remark,
                        },
                        callback: () => {
                            const { role: { roleResult } } = this.props;
                            if (roleResult.code == 200) {
                                message.success("提交成功")
                                this.props.form.resetFields();
                                dispatch({
                                    type: 'role/fetchRole',
                                    payload: {
                                        offset: 0,
                                        limit: 10,
                                    },
                                });
                                this.setState({
                                    modalVisible: false,
                                });
                            } else {
                                message.error(roleResult.message)
                            }
                        },
                    });
                }
                else {
                    dispatch({
                        type: 'role/updateRole',
                        payload: {
                            id: this.state.role.id,
                            roleName: values.roleName,
                            level: values.level,
                            remark: values.remark,
                        },
                        callback: () => {
                            const { role: { roleResult } } = this.props;
                            if (roleResult.code == 200) {
                                message.success("提交成功")
                                this.props.form.resetFields();
                                dispatch({
                                    type: 'role/fetchRole',
                                    payload: {
                                        offset: 0,
                                        limit: 10,
                                    },
                                });
                                this.setState({
                                    modalVisible: false,
                                });
                            } else {
                                message.error(roleResult.message)
                            }
                        },
                    }, );
                }
            }
        });
    }

    onChange = (e) => {
        this.setState({
            value: e.target.value,
        });
    }
    //编辑
    edit = (record) => {
        this.setState({
            modalVisible: true,
            isEdit: false,
            role: record,
        });
    };
    //新增
    handleAddJobs = () => {
        this.setState({
            modalVisible: true,
            isEdit: true,
        });
    }
    //层级选择
    handleChange = (value) => {
        this.setState({
            level: value,
        });
    }
    handleModalCancel = () => {
        this.setState({
            modalVisible: false,
        });
    }

    columns = [{
        title: '角色名',
        dataIndex: 'roleName',
        key: 'roleName',
        width: '25%'
    }, {
        title: '角色描述',
        dataIndex: 'remark',
        key: 'remark',
        width: '25%'
    }, {
        title: '角色层级',
        dataIndex: 'level',
        key: 'level',
        width: '25%',
        render(val) {
            return levelTypeArray[val];
        },
    }, {
        title: '操作',
        dataIndex: 'authority',
        render: (text, record) => (
            <Fragment>
                <a onClick={() => this.edit(record)}>编辑</a>
                <Divider type="vertical" />
                <Link to={`/system/role-authorization?id=${record.id}`}>配置</Link>
            </Fragment>
        )
    }];


    render() {
        const Option = Select.Option;
        const { role: { roleList, roleLoading, roleResourceLoading } } = this.props;
        const { modalVisible, isEdit } = this.state;
        const { dispatch, form } = this.props;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };

        return (
            <PageHeaderLayout title="角色管理">
                <Card bordered={false}>
                    <div className={styles.tableListOperator}>
                        <Button
                            style={{ marginBottom: 30 }}
                            icon="plus"
                            type="primary"
                            onClick={this.handleAddJobs}>
                            添加角色
                        </Button>
                    </div>
                    <Table
                        columns={this.columns}
                        dataSource={roleList}
                        rowKey="id"
                        loading={roleLoading} />
                </Card>
                <Modal
                    title={isEdit ? '添加角色' : '编辑角色'}
                    visible={this.state.modalVisible}
                    onOk={this.hanleCreateRoleModalOk}
                    onCancel={this.handleModalCancel}
                    loading={roleResourceLoading}>
                    <Form>
                        <FormItem {...formItemLayout} label="角色名称">
                            {getFieldDecorator('roleName', {
                                initialValue: isEdit ? null : this.state.role.roleName,
                                rules: [{
                                    required: true,
                                    message: '请输入角色名称',
                                },],
                            })(<Input placeholder="请输入角色名称" />)}
                        </FormItem>
                        <FormItem {...formItemLayout} label="组织层级">
                            {getFieldDecorator('level', {
                                initialValue: isEdit ? null : this.state.role.level,
                                rules: [{
                                    required: true,
                                    message: '请选择',
                                },],
                            })(
                                <Select
                                    placeholder="请选择层级"
                                    onChange={this.handleChange}
                                >
                                    <Option value={0}>平台</Option>
                                    <Option value={1}>机构</Option>
                                    <Option value={2}>分公司</Option>
                                    <Option value={3}>二级分公司</Option>
                                    <Option value={4}>业务员</Option>
                                </Select>
                            )}
                        </FormItem>
                        <FormItem {...formItemLayout} label="角色描述">
                            {getFieldDecorator('remark', {
                                initialValue: isEdit ? null : this.state.role.remark,
                                rules: [{
                                    required: true,
                                    message: '请输入角色描述',
                                },],
                            })(<TextArea placeholder="请输入角色描述" rows={4} />)}
                        </FormItem>
                    </Form>
                </Modal>
            </PageHeaderLayout>
        );
    }


}
